<template>
  <div class="detail">
    <header>
      <div class="returns" @click="goBack()">
        <i class="iconfont icon-fanhui"></i>
      </div>
      <img class="img" src="../../../public/images/底部.jpg" alt="" />
    </header>
    <section>
      <div class="goods">
        <img :src="chaxueList.imgUrl" alt="" />
        <p class="price">￥ {{ chaxueList.price }}</p>
        <p class="name">
          {{ chaxueList.name }}
        </p>
        <p class="jieshao">茶艺师报名费，请及时与小宁老师联系 微信8888888</p>
      </div>

      <div class="fangxingou" @click="fangxingou()">
        <van-icon class="thumb-circle" name="thumb-circle" />
        <p><b>放心购</b> 好物，售后有保障</p>
        <van-icon class="arrow" name="arrow" />
        <div class="tar2">
          <van-action-sheet v-model="show" title="放心购">
            <div class="content">
              <van-icon class="sign" name="sign" />
              <div class="p1">品质保证</div>
              <div class="p2">
                商家已通过 “国家企业信息公示系统”
                核验，许可资质齐全，商品品质有保证
              </div>

              <van-icon class="cash-on-deliver" name="cash-on-deliver" />
              <div class="p3">退货包运费</div>
              <div class="p4">
                商家提供退货包运费补贴，退换货成功后可补贴一定金额运费，实际赠送情况以订单详情页为准
              </div>

              <van-icon class="smile-comment-o" name="smile-comment-o" />
              <div class="p5">专属客服</div>
              <div class="p6">
                点击订单详情页-放系你够客服，快速解决售后问题。
              </div>

              <van-icon class="vip-card-o" name="vip-card-o" />
              <div class="p7">先行赔付</div>
              <div class="p8">
                若发生商品为过期/三无产品，商品秒数与书屋不符，与商家运费发生争议，消费者在15天内发起申请并提供有效凭证，可享受先行赔付
              </div>
            </div>
          </van-action-sheet>
        </div>
      </div>

      <div class="yunfei">运费 无需配送</div>

      <div class="fuwu" @click="fuwu()">
        <p>服务 不支持申请退款 收货后结算</p>
        <van-icon class="arrow" name="arrow" />
        <div class="tar2">
          <van-action-sheet v-model="show1">
            <div class="content">
              <div class="p3">不支持申请退款</div>
              <div class="p5">此商品不支持卖家申请退款</div>
              <div class="p4">收货后结算</div>
              <div class="p6">
                该店铺交易由重案六组提供资金存管服务，当符合以下条件时，资金自动结算给商家：<br />
                卖家确认收货或到达约定的自动确认收货日期。<br />
                交易资金未经重案六组存管的情形不再本范围服务范围内
              </div>
            </div>

            <div class="dao">
              <p class="p1">我知道啦</p>
            </div>
          </van-action-sheet>
        </div>
      </div>

      <div class="main">
        <p class="line">茶艺是一门艺术，更是一种修为</p>
        <p class="line1">
          茶学是一门具有悠久历史和鲜明特色的传统学科，亦是一门涉及自然科学和人文科学的现代学科。中国是茶的故乡，云南是世界茶树的起源中心。茶叶既是云南的传统支柱产业，也是数百万山区农民的主要经济来源和地方财政的主要税源。云南的山区，特别是一些贫困山区，一直把茶叶视为生命产业。
        </p>
        <img
          src="https://gd-hbimg.huaban.com/e7f83d928725d3b562299a0ac5e13a791b5b80931c182-bbhdg2_fw658"
          alt=""
        />
        <img
          src="https://gd-hbimg.huaban.com/a5cf808fdd5dc8ff5795e1a0894955df8d77dd8be2c8-Kb8KsS_fw658"
          alt=""
        />
      </div>
    </section>
    <footer>
      <van-goods-action>
        <van-goods-action-icon icon="chat-o" text="客服" @click="showPopup()" />
        <van-popup v-model="show2">
          <p class="erweima">有问题请扫描二维码</p>
          <p class="liuyan">在平台留言即可</p>
          <img src="../../../public/images/二维码.jpg" alt="" />
        </van-popup>
        <van-goods-action-icon
          icon="shop-o"
          text="购物车"
          @click="$router.push({ path: '/cart' })"
        />
        <van-goods-action-button
          color="#be99ff"
          type="warning"
          text="加入购物车"
          @click="addgoodsCart()"
        />
        <!-- <van-goods-action-button
          color="#7232dd"
          type="danger"
          text="立即购买"
        /> -->
      </van-goods-action>
    </footer>
  </div>
</template>

<script>
import http from "@/common/api/request.js";
export default {
  data() {
    return {
      chaxueList: [],
      styleOption: {},
      BetterScroll: "",
      isShow: true,
      activeNames: ["1"],
      show: false,
      show1: false,
      show2: false,
    };
  },
  created() {
    this.getChaxue();
  },

  methods: {
    //   获取茶书分类
    async getChaxue() {
      let res = await http.$axios({
        url: "http://127.0.0.1:3008/goods/goodsxueslist",
      });
      this.chaxueList = res[0];
    },

    // 放心购
    fangxingou() {
      this.show = !this.show;
    },
    fuwu() {
      this.show1 = !this.show1;
    },

    // 气泡框
    showPopup() {
      this.show2 = true;
    },

    // 加入购物车
    addgoodsCart() {
      this.$http
        .post(
          "http://127.0.0.1:3008/goods/goodscart",
          {
            id: this.chaxueList.id,
            imgUrl: this.chaxueList.imgUrl,
            name: this.chaxueList.name,
            price: this.chaxueList.price,
            num: this.chaxueList.num,
          },
          { emulateJSON: true }
        )
        .then(function (res) {});
      this.$toast({
        message: "加入购物车成功",
        forbidClick: true,
        duration: 1000,
      });
    },

    // 返回上一级
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style scoped>
.detail {
  background-color: #f3f3f3;
  font-family: STFangsong;
  letter-spacing: 1px;
}
.detail header {
  margin-top: 11px;
}
.detail header i {
  font-family: "iconfont" !important;
  font-size: 75px;
  font-style: normal;
  z-index: 1;
  position: relative;
}
.detail header .img {
  vertical-align: middle;
  width: 128%;
  height: 169px;
  margin-top: -155px;
}
.detail section {
  margin-top: -41px;
}
.detail section .goods {
  background-color: #fff;
}
.detail section .goods img {
  width: 100%;
  height: 448px;
}
.detail section .goods .price {
  color: #fd3f31;
  margin-top: 21px;
  font-size: 26px;
  margin-left: 20px;
}
.detail section .goods .jieshao {
  font-size: 14px;
  margin-top: -14px;
  margin-left: 9px;
  color: #7a7a7a;
  padding-bottom: 20px;
}
.detail section .goods .name {
  font-size: 18px;
  margin-left: 11px;
  margin-top: 18px;
  padding-bottom: 21px;
}
.detail section .fangxingou {
  background-color: #fff;
  margin-top: 12px;
  height: 68px;
}
.detail section .fangxingou .thumb-circle {
  position: relative;
  font-size: 27px;
  left: 20px;
  top: 8px;
  color: #00d947;
}
.detail section .fangxingou .arrow {
  position: relative;
  font-size: 25px;
  top: -36px;
  left: 343px;
}
.detail section .fangxingou .content {
  padding: 16px 16px 160px;
}
.detail section .fangxingou .content .sign,
.detail section .fangxingou .content .cash-on-deliver,
.detail section .fangxingou .content .smile-comment-o,
.detail section .fangxingou .content .vip-card-o {
  font-size: 20px;
  color: #00d947;
  left: 9px;
  top: 37px;
}
.detail section .fangxingou .content .p1,
.detail section .fangxingou .content .p3,
.detail section .fangxingou .content .p5,
.detail section .fangxingou .content .p7 {
  font-size: 18px;
  margin-left: 39px;
}
.detail section .fangxingou .content .p2,
.detail section .fangxingou .content .p4,
.detail section .fangxingou .content .p6,
.detail section .fangxingou .content .p8 {
  font-size: 14px;
  margin-left: 39px;
  margin-top: 8px;
  color: #a5a5a5;
}
.detail section .fangxingou p {
  color: #00d947;
  font-size: 20px;
  padding-left: 20px;
  padding-left: 54px;
  font-weight: 1000;
  margin-top: -31px;
}
.detail section .yunfei {
  background-color: #fff;
  margin-top: 12px;
  height: 54px;
  font-size: 18px;
  padding-left: 25px;
  padding-top: 16px;
}
.detail section .fuwu {
  background-color: #fff;
  margin-top: 12px;
  font-size: 18px;
}
.detail section .fuwu .arrow {
  position: relative;
  font-size: 20px;
  top: -23px;
  left: 343px;
}
.detail section .fuwu .content {
  padding: 64px 4px 37px;
}
.detail section .fuwu .content .sign,
.detail section .fuwu .content .cash-on-deliver,
.detail section .fuwu .content .smile-comment-o,
.detail section .fuwu .content .vip-card-o {
  font-size: 20px;
  left: 9px;
  top: 37px;
}
.detail section .fuwu .content .p3,
.detail section .fuwu .content .p4 {
  font-size: 18px;
  margin-left: 39px;
}
.detail section .fuwu .content .p5,
.detail section .fuwu .content .p6 {
  font-size: 15px;
  margin-left: 39px;
  margin-top: 15px;
  color: #a0a0a0;
  margin-bottom: 20px;
}
.detail section .fuwu .dao {
  margin-top: 41px;
  background-color: #ff1100;
  border-radius: 24px;
  width: 343px;
  margin-left: 27px;
}
.detail section .fuwu .dao .p1 {
  color: #fff;
  text-align: center;
  font-size: 17px;
  padding: 8px 20px;
}
.detail section .fuwu p {
  font-size: 18px;
  padding-left: 20px;
  padding-top: 20px;
}
.detail section .main {
  margin-top: 47px;
}
.detail section .main .line {
  background-color: #ffffff;
  font-size: 20px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: black;
}
.detail section .main .line1 {
  background-color: #ffffff;
  font-size: 20px;
  color: black;
  padding-top: 9px;
  text-indent: 2em;
  margin-top: 20px;
}
.detail section .main img {
  margin-top: 20px;
}
.detail section .more {
  padding-bottom: 150px;
}
.detail footer .erweima {
  font-size: 20px;
  text-align: center;
  margin-top: 20px;
}
.detail footer .liuyan {
  font-size: 20px;
  text-align: center;
}
.detail footer img {
  vertical-align: middle;
  height: 323px;
  width: 310px;
} /*# sourceMappingURL=./index.css.map */
</style>
